<template>
  <el-form label-width="90px" size="mini">
    <el-collapse value="1" class="customer-collapse">
      <chart-base-option :attribute="attribute" :has-grid="false"/>

     <el-collapse-item title="雷达属性">
       <tm-group label="属性">
         <el-form-item label="半径">
           <el-input-number v-model="attribute.radar.radius" />
         </el-form-item>
         <el-form-item label="形状">
           <tm-radio v-model="attribute.radar.shape" :data="shapeList"/>
         </el-form-item>
         <el-form-item label="起始角度">
           <el-input-number v-model="attribute.radar.startAngle" />
         </el-form-item>
         <el-form-item label="距离">
           <el-input-number v-model="attribute.radar.nameGap" />
         </el-form-item>

         <el-form-item label="水平位置">
           <el-input v-model="attribute.radar.center[0]" />
         </el-form-item>
         <el-form-item label="垂直位置">
           <el-input v-model="attribute.radar.center[1]" />
         </el-form-item>

         <el-form-item label="分隔线数">
           <el-input-number v-model="attribute.radar.splitNumber" />
         </el-form-item>
       </tm-group>
       <tm-group label="标记symbol">
         <el-form-item label="图形">
           <tm-select v-model="attribute.series[0].symbol" :data="symbolList" />
         </el-form-item>
         <el-form-item label="大小">
           <el-input-number v-model="attribute.series[0].symbolSize" />
         </el-form-item>
         <el-form-item label="边框颜色">
           <el-color-picker v-model="attribute.series[0].itemStyle.borderColor" show-alpha/>
         </el-form-item>
         <el-form-item label="边框宽度">
           <el-input-number v-model="attribute.series[0].itemStyle.borderWidth"/>
         </el-form-item>
         <el-form-item label="阴影">
           <el-color-picker v-model="attribute.series[0].itemStyle.shadowColor" show-alpha/>
         </el-form-item>
         <el-form-item label="模糊">
           <el-input-number v-model="attribute.series[0].itemStyle.shadowBlur"/>
         </el-form-item>

       </tm-group>
     </el-collapse-item>

      <el-collapse-item title="指示器名称">
        <el-form-item label="显示">
          <el-switch v-model="attribute.radar.axisName.show" />
        </el-form-item>
        <el-form-item label="颜色">
          <el-color-picker v-model="attribute.radar.axisName.color" show-alpha/>
        </el-form-item>
        <el-form-item label="字体大小">
          <el-input-number v-model="attribute.radar.axisName.fontSize" />
        </el-form-item>
        <text-shadow-option :data="attribute.radar.axisName" :show-opacity="false"/>
        <formatter-option :data="attribute.radar.axisName"/>
      </el-collapse-item>

      <el-collapse-item title="坐标轴">
        <el-form-item label="显示">
          <el-switch v-model="attribute.radar.axisLine.show" />
        </el-form-item>
        <el-form-item label="线条颜色">
          <el-color-picker v-model="attribute.radar.axisLine.lineStyle.color" show-alpha/>
        </el-form-item>
        <el-form-item label="线条宽度">
          <el-input-number v-model="attribute.radar.axisLine.lineStyle.width" :min="0"/>
        </el-form-item>
        <shadow-option :data="attribute.radar.axisLine.lineStyle" :show-opacity="false"/>
      </el-collapse-item>

      <el-collapse-item title="分隔线">
        <el-form-item label="显示">
          <el-switch v-model="attribute.radar.splitLine.show" />
        </el-form-item>
        <el-form-item label="颜色">
          <tm-colors v-model="attribute.radar.splitLine.lineStyle.color"/>
        </el-form-item>
        <el-form-item label="线条宽度">
          <el-input-number v-model="attribute.radar.splitLine.lineStyle.width" :min="0"/>
        </el-form-item>
        <shadow-option :data="attribute.radar.splitLine.lineStyle" :show-opacity="false"/>
      </el-collapse-item>

      <el-collapse-item title="指示器">
        <el-form-item label="">
          <el-button type="info" @click="onAdd">新增列</el-button>
        </el-form-item>
        <div class="table-wrap">
          <sys-table class="screen-table" @row-click="onEdit" :columns="metadata" border stripe size="mini" :show-page="false" :data="attribute.radar.indicator">
          </sys-table>
        </div>

      </el-collapse-item>
    </el-collapse>

    <simple-dialog2 v-bind.sync="dialog" theme="dark" @on-ok="onDialogOk"/>
  </el-form>
</template>

<script>
import tmRadio from '@/package/components/tm-radio'
import shadowOption from '../shadow-option'
import textShadowOption from '../text-shadow-option'
import formatterOption from '../formatter-option'
import chartBaseOption from '../chart-base-option'
import tmColors from "@/package/components/tm-colors";
import sysTable from "@/components/common/page/sys-table";
import dialogMixin from "@/components/common/dialog/dialog-mixin"
import columnEdit from './column-edit'
import TmSelect from "@/package/components/tm-select";

export default {
  name: 'bar01-option',
  cnName: 'bar01-option',
  mixins: [dialogMixin],
  components: {
    TmSelect,
    tmRadio,
    chartBaseOption,
    formatterOption,
    shadowOption,
    textShadowOption,
    tmColors,
    sysTable
  },
  props: {
    attribute: Object
  },
  data() {
    return {
      shapeList: [
        {label: '多边形', value: 'polygon'},
        {label: '圆形', value: 'circle'}
      ],
      rotateList: [
        {label: '无', value: 0},
        {label: '径向旋转', value: 'radial'},
        {label: '切向旋转', value: 'tangential'}
      ],
      metadata: [
        {label: '字段英文名', prop: 'prop'},
        {label: '字段中文名', prop: 'name'},
        {label: '最大值', prop: 'max'}
      ],
      symbolList: [
        {label: 'circle', value: 'circle'},
        {label: 'rect', value: 'rect'},
        {label: 'roundRect', value: 'roundRect'},
        {label: 'triangle', value: 'triangle'},
        {label: 'diamond', value: 'diamond'},
        {label: 'pin', value: 'pin'},
        {label: 'arrow', value: 'arrow'},
        {label: 'none', value: 'none'}
      ]
    }
  },
  methods: {
    onAdd(evt) {
      const origin = {
        x: evt.pageX,
        y: evt.pageY
      }
      this.setDialog({
        title: '新增列',
        width: '400px',
        origin: origin,
        comp: columnEdit,
        props: {
        }
      })
    },
    onEdit(row) {
      this.setDialog({
        title: '编辑列',
        width: '400px',
        comp: columnEdit,
        props: {
          data: row
        }
      })
    },
    onDialogOk(flag, data) {
      this.dialog.visible = false
      const index = this.attribute.radar.indicator.findIndex(o => o.id === data.id)
      if(flag === 0) {
        this.attribute.radar.indicator.splice(index, 1)
        return
      }

      console.info('ook:', data)

      if(index === -1) {
        this.attribute.radar.indicator.push(data)
      } else {
        this.attribute.radar.indicator[index] = data
        this.attribute.radar.indicator = [].concat(this.attribute.radar.indicator)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.table-wrap {
  padding: 0 10px;
}
</style>
